<template>
	<view class="content">
		<u-navbar class="head" :fixed="false" left-icon="" :autoBack="false" :safeAreaInsetTop="true">
			<view slot="left">
				<view @click="openPopup" class="x-c" style="color: #fff;">
					<text style="display: block;min-width: 100rpx;">{{ChoceAppFun['name']}}</text>
					<uni-icons type="down" size="20" color="#fff"></uni-icons>
				</view>
			</view>
			<view slot="right">
				<view class="x-f homeBox">
					<uni-icons fontFamily="CustomFontPlatform" color="#fff"
						size="18">{{$utils.toUniCode('&#xe675;')}}</uni-icons>
					<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
					<uni-icons fontFamily="CustomFontPlatform" color="#fff" size="18"
						@click="CloseShopPage">{{$utils.toUniCode('&#xe64a;')}}</uni-icons>
				</view>
			</view>
		</u-navbar>

		<web-view ref="webview" v-if="isShow" fullscreen="false" class="uni-flex-item" :src="ChoceAppFun.D_Url">
		</web-view>

		<!-- <web-view ref="webview" v-if="isShow && deviceModel != 'PDA'" fullscreen="false" class="uni-flex-item"
			:src="ChoceAppFun.D_Url">
		</web-view>

		<web-view ref="webview" v-else-if="isShow && deviceModel == 'PDA'" fullscreen="false" class="uni-flex-item"
			src="/static/html/LabReport.html">
		</web-view> -->


		<!-- <web-view ref="webview" v-if="isShow" fullscreen="false" class="uni-flex-item"
			src="/static/html/LabReport.html"> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				HtmlUrl: null,
				isShow: true,
				dataList: [],
				ChoceAppFun: {},
				deviceModel: 'PDA'
			}
		},
		onLoad(option) {
			var that = this;

			const systemInfo = uni.getSystemInfoSync();
			console.log(systemInfo)

			that.deviceModel = systemInfo.deviceModel;

			if (systemInfo.deviceModel == 'PDA') {

			} else {

			}


			if (!that.$utils.isEmpty(option)) {

				that.GetWebViewUrl(option.ID);
			}

			// 接收原生子窗体传来的数据的消息
			uni.$on('popup-page', (data) => {
				console.log(data);
				that.$utils.showLoading()

				if (!that.$utils.isEmpty(data.type)) {

					switch (data.type) {
						case 'interactive':
							// 选中项目
							that.dataList.forEach(item => {
								item.checked = false;
								if (item.name == data.info.name) {
									item.checked = true;
								}
							})
							let obj = that.$utils.deepClone(data.info)
							obj['checked'] = true;
							that.ChoceAppFun = obj;

							that.$utils.hideLoading(1000)

							break;
						default:
							uni.showToast({
								title: data.title,
							})
							break;
					}
				} else {
					uni.showToast({
						title: data.title,
					})
				}
			});
		},
		onReady() {
			var that = this;
			let height = 0; //定义动态的高度变量
			let navbarHeight = 0;
			uni.getSystemInfo({ // 获取当前设备的具体信息
				success: (sysinfo) => {
					// 总盒子高度
					height = sysinfo.windowHeight;
					// 导航栏高度
					uni.createSelectorQuery().select('.head').boundingClientRect(data => {
						console.log(data)
						navbarHeight = data.height;
						height = height - data.height;
						let currentWebview = that.$scope.$getAppWebview().children()[0]; //获取当前web-view
						var wv = currentWebview;
						wv.setStyle({ //设置web-view距离顶部的距离以及自己的高度，单位为px
							top: navbarHeight, //此处是距离顶部的高度，应该是你页面的头部
							height: height, //webview的高度
						})
					}).exec()

				}
			});
		},
		//移除监听
		onUnload() {
			uni.$off('popup-page')
		},
		methods: {
			openPopup() {
				let that = this;
				// #ifdef APP-PLUS
				const control_popup = uni.getSubNVueById('controlPopup') //设置子窗体
				control_popup.show('slide-in-top', 200, () => {
					uni.$emit('sendMetalList', { // 与子窗体通信
						metalList: JSON.parse(JSON.stringify(that.dataList)),
					});
				})
				// #endif
			},
			GetWebViewUrl(ID) { // 获取链接数据
				var that = this
				that.Request.request('PlantHeadBook', {
					Type: ID
				}, function(ret) {
					if (ret.status == 200) {
						that.dataList = ret.data.ds.map((item, index) => {
							return {
								...item,
								id: index,
								name: item.D_Name,
								checked: false,
							}
						})

						that.dataList[0]['checked'] = true;

						that.ChoceAppFun = that.$utils.deepClone(that.dataList[0])
						// that.ChoceAppFun = that.dataList[0];
						console.log(that.ChoceAppFun);

						setTimeout(() => {
							that.isShow = true;
						}, 300)



						// if (ret.data.ds[0].url) {
						// 	that.isShow = true;
						// 	that.HtmlUrl = ret.data.ds[0].url;
						// }
					}
				});
			},
			CloseShopPage() { // 关闭商城
				var that = this;
				// console.log(this.OrderUrl)
				that.isShow = false;
				setTimeout(() => {

					uni.navigateBack()
				}, 50)
			},
		}
	}
</script>

<style lang="scss">
	* {
		background-color: transparent;
	}

	.content {
		// background-color: #51d0d0;
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		/* 给顶部盒子安全高度 */
		// padding-top: var(--status-bar-height);

		.head {
			z-index: 99999999;
			position: relative;
		}

		.popup-container {
			z-index: 1001;
			/* 设置一个较高的z-index值 */
		}
	}

	.homeBox {
		border: 1px solid #fff;
		color: #fff;
		padding: 6px 12px;
		overflow: hidden;
		border-radius: 9999px;
	}
</style>